<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/commont.css"/>
    <link rel="stylesheet" type="text/css" href="css/detail.css"/>
    <style>

        .box {
            width: 100%;
            margin: 100px auto;
            height: 800px;
            background-color: pink;
        }
        .box ul {
            height: 49px;
            line-height: 49px;
            background-color: #ccc;
            border-bottom: 1px solid red;
        }
        .box ul li {
            cursor: pointer;
            text-align: center;
            padding: 0 50px;
            float: left;
            list-style: none;
        }

        .content {
            height: 500px;
        }
        .bot .content {
            display: none;
        }

        #ul2{
            background: pink;
            border-bottom : none;
        }
        #ul2  li {
            list-style: none;
            background-color: pink;
            color: black;
            font-weight: bold;
            width: 100%;
        }

        .small-img {
            width: 268px;
            margin-right: 20px;
            position: relative;
        }

        .small-img img {
            width: 100%;
        }

        .small-img-copy {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: move;
            z-index: 99;
        }

        .magnifier {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, .2);
            z-index: 98;
            display: none;
        }

        .big-img {
            width: 350px;
            height: 350px;
            border: 1px solid #eee;
            overflow: hidden;
            position: relative;
            left: -350px;
            top: -400px;
        }

        .big-img img {
            width: 536px;
            position: relative;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<header>

    <!-- 上方推广图 -->
    <div class="header-top" style="background-color: #FB5643;">
        <div class="img-top box-cont" style="margin: 0 auto">
            <img src="./images/header-top.PNG" height="100" style="margin-left: 180px">
        </div>
    </div>
    <!-- 导航栏开始 -->
    <nav>
        <div class="box-cont">
            <ul class="fl-l">
                <li><a href="index.html">小米商城</a></li>
                <li></li>
                <li><a href="">MIUI</a></li>
                <li></li>
                <li><a href="">IoT</a></li>
                <li></li>
                <li><a href="">云服务</a></li>
                <li></li>
                <li><a href="">天星数科</a></li>
                <li></li>
                <li><a href="">有品</a></li>
                <li></li>
                <li><a href="">小爱开放平台</a></li>
                <li></li>
                <li><a href="">企业团购</a></li>
                <li></li>
                <li><a href="">资质证照</a></li>
                <li></li>
                <li><a href="">协议规则</a></li>
                <li></li>
                <li><a href="" id="app">下载app</a></li>
                <li></li>
                <li><a href="">智能生活</a></li>
                <li></li>
                <li><a href="">Select Location</a></li>
            </ul>
            <ul class="fl-r fr">
                <li><a href="login.html">登陆</a></li>
                <li></li>
                <li><a href="reg.html">注册</a></li>
                <li></li>
                <li><a href="">消息通知</a></li>
                <li></li>
                <li class="shopping"><a href="cart.html" id="shopcar">购物车&nbsp(0)</a></li>
            </ul>
            <div id="QR">
                <div><img  src="images/QR.PNG"></div>
                <div>小米商城App</div>
            </div>
            <div id="shopcar-cont">购物车中还没有商品,赶紧选购吧</div>
        </div>
    </nav>
    <!-- 搜索栏开始 -->
    <div class="header-top-middle">
        <div class="box-cont">
            <div id="logo-box" title="小米首页">
                <div id="logobox" class="logo fl">
                    <a href="index.html">
                        <img class="fl" id="logo" src="images/logo.PNG" >
                    </a>
                </div>
            </div>
            <div class="nav-cont">
                <ul class="fl">
                    <li><a href="">小米手机</a></li>
                    <li><a href="">Redmi&nbsp;红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="search fl">
                <input class="search-r fl" type="text" placeholder="红米10" />
                <button type="button" class="btn fl"></button>
            </div>
        </div>
    </div>
</header>
<hr>
<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div style="border: 1px solid #eee;height: 350px">
                    <div class="small-img">
                        <img id="img"  src=""  class="center-block" style="height: 400px;width: 350px;"/>
                        <div class="small-img-copy"></div>
                        <div class="magnifier"></div>
                    </div>
                    <div class="big-img">
                        <img src="" alt="" id="img2" style="display: none">
                    </div>
                </div>
                <div class="row" style="margin-bottom: 25px;"></div>
            </div>
            <div class="col-md-7 col-lg-offset-1">
                <div class="row">
                    <div class="pull-left">
                        <img src="images/d3c18d60f0e54c32af5cf24d18be585b1419662519909i46mer1g10007.png" alt="" width="25px" height="25px"/>
                        <span>法国</span>
                        <span>|<p  id="lianjie" style="font-size: 24px;font-weight: 400;color: #212121;"></p></span>
                    </div>
                    <div class="pull-right">
                        <p style="border: 1px solid #FE0712; color: #FE0712;font-weight: bold;">自营|品牌直采</p>
                    </div>

                </div>
                <div class="row">
                    <h4 style="font-weight: bold" id="commodity_name"></h4>
                </div>
                <div class="row">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h3 class="panel-title" style="color: #ffffff"><span class="pull-left">
                                <img src="images/191a6c21-1d3c-479f-9d4a-383bf214b71fT1905311348_200_80.jpg" style="height: 37px; width: 80px;position: relative;top: -9px;"/>
                            </span>限时特价<span class="pull-right">距结束还有1天12分32秒</span></h3>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <span>售价</span>
                                <span style="padding-left:25px; color:#FE0712; font-weight: bold;">新人价；<span style="font-size: 25px;">￥<span id="price"></span></span></span>
                                <span style="padding-left: 25px;">考虑价<span id="price2"></span></span>
                                <span style="color: white;background-color:#FE0712;font-size: 12px" >包邮</span>
                            </div>
                            <div class="row " style="margin-left: 20px">
                                <span style="padding-left:25px;font-weight: bold;font-size: 13px"><img src="images/6dc03e40-5452-4a3e-a039-1ae8badbce2e_120_45.png" alt="" height="17px" width="45.5px" style="color: #1e1e1e;">黑卡会员预计可<span style="color: red;font-size: 12px">省￥2.00</span></span>
                            </div>
                            <div class="row " style="margin-left: 67px">
								<span style="padding-left:25px;font-size: 13px;">会员可享96折<span style="color: red;font-size: 12px;margin-left: 10px"><a
                                        href="">立即开卡</a></span></span>
                            </div>
                            <div class="row " style="margin-left: 20px">
								<span style="padding-left:25px;font-size: 13px"><img src="images/coupon-icon.2cc23d0.png" alt="" height="12.7px">&nbsp;<img src="images/6c0ba6fa-3faa-4b12-a114-66e9d74dca70.png" alt="" height="12.7px" width="40px" style="color: #1e1e1e;">先领满599减59优惠券，再下单<span style="color: red;font-size: 12px;margin-left: 10px"><a
                                        href="">点击领取</a></span></span>
                            </div>

                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <span style="padding-right:40px;">配送</span><span>至<span data-toggle="distpicker">
				<select style="width: 100px;" id="pre" onchange="chg(this);">
                    <option value="-1">请选择</option>
                </select>
                    <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
                    <select style="width: 100px;" id="area"></select>
			</span><span style="padding-left: 25px;">免运费</span></span>
                </div>
                <br />
                <div class="row">
                    <span style="padding-right:40px;">服务</span><span>由自营国内仓<span style="padding-left: 25px;">发货</span></span>
                </div>
                <br />
                <div class="row" style="margin-left: 45px">
                    <span style="">
                            <img src="images/1big0qbev83_120_120.jpg" alt="" height="35px" width="35px">

                        ——————</span><span><img src="images/fahuodi@3x.png" alt="" height="30px" width="30px">——————<span style=""><img src="images/mudidi@3x.png" alt="" height="30px" width="30px"></span></span>
                </div>
                <div class="row" style="margin-left: 45px">
                    <span style="">品牌直采</span><span style="padding-left: 19px">自营国内仓库发货<span style="padding-left: 37px">武汉市</span></span>
                </div>
                <br />
                <div class="row">
                    <span style="padding-right:69px;"></span><span>24点前完成支付，预计6月4日（周二）送达<span style="padding-left: 25px;"></span></span>
                </div>
                <br />
                <div class="row">
                    <span style="padding-right:40px;" class="pull-left">数量</span>
                    <div class="col-md-3">
                        <form class="bs-example bs-example-form" role="form">
                            <div class="input-group input-group-sm">
                                <span class="input-group-addon reduce" id="reduce" style="cursor: pointer">-</span>
                                <input type="text" class="form-control values" value="1" style="text-align: center" id="num">
                                <span class="input-group-addon add" id="add" style="cursor: pointer">+</span>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="container">
                    <span class="hint">点击星星就能打分</span>
                    <ul id="stars">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <span id="score"></span>
                    <p id="panel"></p>
                </div>
                <br />

                <br />
                <div class="row" style="font-size: 12px">
                    <span style="padding-right:40px;">说明</span><span class="glyphicon glyphicon-ok-circle">会员96折<i class="glyphicon glyphicon-ok-circle" style="padding-left: 25px;">正品保障</i><span style="padding-left: 25px;" class="glyphicon glyphicon-ok-circle">支持30天无忧退货</span></span>
                </div>
                <br />
                <br />
                <div class="row">
                    <div class="col-md-8 col-md-offset-1">
                        <button type="button" class="btn btn-default btn-lg" style="margin-right: 35px;">
                            立即购买
                        </button>
                        <button type="button" class="btn btn-danger btn-lg" style="margin-right: 35px;" onclick="cart()">
                            加入购物车
                        </button>
                        <span style="font-size: 20px;color: red">♡</span><span style="margin-left: 2px;">收藏</span>
                    </div>
                </div>

            </div>

        </div>

    <div class="box">
        <ul id="ul1">
            <li style="background-color: red;">商品</li>
            <li>规格</li>
            <li>售后</li>
            <li>商品评价</li>
        </ul>
        <div class="bot">
            <div class="content" style="display: block">我是商品</div>
            <div class="content">我是规格</div>
            <div class="content">我是售后</div>
            <div class="content">
                <input type="text" id="input1" style="width: 300px;height: 50px" placeholder="请输入评论"/>
                <button id="btn" class="btn btn-primary" style="width: 100px;height: 50px">发布评价</button>
                <div class="media">
                    <div class="media-left">
                        <img src="images/commodity/user.jpg" class="media-object" style="width:60px">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">客户1</h4>
                        <p>好评!!好评!!好评!!好评!!好评!!好评!!好评!!好评!!好评!!好评评!!好评!!好评!!好评!!好评!!好评!!好评!!</p>
                    </div>
                </div>
                <ul id="ul2"></ul>
            </div>
        </div>
    </div>

    <footer>
        <div class="box-cont">
            <div class="footer-top clearfix">
                <ul>
                    <li><a href="">预约维修服务</a></li>
                    <li></li>
                    <li><a href="">⑦7天无理由退货</a></li>
                    <li></li>
                    <li><a href="">15天免费换货</a></li>
                    <li></li>
                    <li><a href="">满99元包邮</a></li>
                    <li></li>
                    <li><a href="">500余家售后网点</a></li>
                </ul>

                <div class="help fl">
                    <table border="0"  class="table">
                        <tr>
                            <th>帮助中心</th>
                            <th>服务支持</th>
                            <th>线下门店</th>
                            <th>关于小米</th>
                            <th>关注我们</th>
                            <th>特色服务</th>
                        </tr>
                        <tr>
                            <td><a href="">账户管理</a></td>
                            <td><a href="">售后政策</a></td>
                            <td><a href="">小米之家</a></td>
                            <td><a href="">了解小米</a></td>
                            <td><a href="">新浪微博</a></td>
                            <td><a href="">F码通道</a></td>
                        </tr>
                        <tr>
                            <td><a href="">购物指南</a></td>
                            <td><a href="">自助服务</a></td>
                            <td><a href="">服务网点</a></td>
                            <td><a href="">加入小米</a></td>
                            <td><a href="">官方微信</a></td>
                            <td><a href="">礼物码</a></td>
                        </tr>
                        <tr>
                            <td><a href="">订单操作</a></td>
                            <td><a href="">相关下载</a></td>
                            <td><a href="">授权体验店</a></td>
                            <td><a href="">投资者关系</a></td>
                            <td><a href="">联系我们</a></td>
                            <td><a href="">防伪查询</a></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><a href="">企业社会责任</a></td>
                            <td><a href="">公益基金会</a></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><a href="">廉洁举报</a></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div class="fr rr">
                    <h4 style="font-size: 30px;color: #FF0000;">400-100-5678</h4>
                    <p>8:00-18:00（仅收市话费)</p>
                    <a class="kf">人工客服</a>
                    <p>关注小米</p>
                </div>


            </div>
        </div>
        <div class="footer-bottom">
            <div class="box-cont">
                <img src="images/logo.PNG" class="fl">
                <div class="fl">
                    <p class="foot-nav">
                        <a href="">小米商城</a>
                        |<a href="">MIUI </a>
                        |<a href="">米家</a>
                        |<a href="">多看 </a>
                        |<a href="">米聊</a>
                        |<a href="">游戏</a>
                        |<a href="">政企服务</a>
                        |<a href="">小米天猫店</a>
                        |<a href="">小米集团隐私政策</a>
                        |<a href="">小米公司儿童信息保护规则</a>
                        |<a href="">小米商城隐私政策</a>
                        |<a href="">小米商城用户协议</a>
                        |<a href="">问题反馈</a>
                        |<a href="">Select Location</a>
                    </p>
                    <p>
                        <a href="">© mi.com </a>
                        <a href="">京ICP证110507号</a>
                        <a href="">京ICP备10046444号</a>
                        <a href="">京公网安备11010802020134号</a>
                        <a href="">京网文[2020]0276-042号</a>
                    </p>
                    <p>
                        <a href="">（京）网械平台备字（2018）第00005号</a>
                        <a href="">互联网药品信息服务资格证 </a>
                        <a href="">(京)-非经营性-2014-0090</a>
                        <a href="">营业执照</a>
                        <a href="">医疗器械质量公告</a>
                    </p>
                    <p>
                        <a href="">增值电信业务许可证</a>
                        <a href="">网络食品经营备案</a>
                        <a href="">京食药网食备202010048</a>
                        <a href=""></a>
                    </p>
                    <p>
                        <a href="">违法和不良信息举报电话：171-5104-4404 </a>
                        <a href="">知识产权侵权投诉</a>
                        <a href="">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
                    </p>
                </div>
                <div class="img-TV box-cont">
                    <a href=""><div class="nav-tv"><img src="images/footer.PNG" style="width: 100%;height: 100%; margin: 40px auto;"></div></a>
                </div>
            </div>
        </div>

    </footer>

<script src="js/detail.js"></script>
</body>
</html>


